<!DOCTYPE html>
<html lang="en">
<head>
    <title>智普定位 Map</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
</head>
<body>
    <br/>
    <div id="zoom">
        <button type="button"  id="zommOut">缩小（-）</button>
        <button type="button"  id="zomm">放大（+）</button>
    </div>
    <div>
        <img border='0' id="img" src="" alt="">
    </div>
    <div>
        <span>powered By </span><a href="http://wwww.fcstgps.com">fcstgps.com</a>
    </div>
    <div id="LatLng"></div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    var zoomIndex = 10;
    navigator.geolocation.getCurrentPosition((success) => {
    $("#LatLng").html("LatLng:" + success.coords.latitude+","+success.coords.longitude)
    $('#zommOut').click(function () {       
        if(zoomIndex == 1 ){
            zoomIndex = 1;
        }else{
            zoomIndex -= 1;
        }
        
        console.log(zoomIndex)
        var url = "https://maps.googleapis.com/maps/api/staticmap?center="+success.coords.latitude+","+success.coords.longitude+"&zoom="+zoomIndex+"&size=320x450&maptype=roadmap&markers=color:red|label:S|"+success.coords.latitude+","+success.coords.longitude+"&key=AIzaSyDG3KCY4inRsrHPkcPt0XlQUJrf9UrhaTw";
        $('img').attr('src',url);
    }) 

    $('#zomm').click(function () {       
        if(zoomIndex >=19){
            zoomIndex = 19;
        }else{
            zoomIndex += 1;
        }
        console.log(zoomIndex)
        var url = "https://maps.googleapis.com/maps/api/staticmap?center="+success.coords.latitude+","+success.coords.longitude+"&zoom="+zoomIndex+"&size=320x450&maptype=roadmap&markers=color:red|label:S|"+success.coords.latitude+","+success.coords.longitude+"&key=AIzaSyDG3KCY4inRsrHPkcPt0XlQUJrf9UrhaTw";
        $('img').attr('src',url);
    })

    var url = "https://maps.googleapis.com/maps/api/staticmap?center="+success.coords.latitude+","+success.coords.longitude+"&zoom="+zoomIndex+"&size=320x450&maptype=roadmap&markers=color:red|label:S|"+success.coords.latitude+","+success.coords.longitude+"&key=AIzaSyDG3KCY4inRsrHPkcPt0XlQUJrf9UrhaTw";
    $('img').attr('src',url);
    },(error) => {
        alert("Failed to obtain location information!");
    });
</script>
</body>
</html>